<%@page import="com.fasterxml.jackson.annotation.JsonInclude.Include"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="zh-CN">
	<%@ include file="/WEB-INF/include-head.jsp" %>
	<style type="text/css"> 
		#divPicture{text-align: center;}
	</style>
	<script type="text/javascript">
		var curIndex=0;
		$(function () {
			$("#btn0").click(function() {
				//上一张
				//debugger;
				if(curIndex <= 1){
				 	curIndex =1;
				 	layer.msg("已经是第一张了");
				 	}else{
				 	curIndex--;
				 	}
				$("#img_1").attr("src","Picture/pler.ht?index="+curIndex)
			});
			$("#btn1").click(function() {
				curIndex=1;
				// 获取img1然后设置它的src属性
				$("#img_1").attr("src","Picture/pler.ht?index="+curIndex)
			});
			$("#btn2").click(function() {
				curIndex=2;
				// 获取img1然后设置它的src属性
				$("#img_1").attr("src","Picture/pler.ht?index="+curIndex)
			})
			$("#btn3").click(function() {
				curIndex=3;
				// 获取img1然后设置它的src属性
				$("#img_1").attr("src","Picture/pler.ht?index="+curIndex)
			})
			$("#btn000").click(function() {
				//下一张
				if(curIndex >= 3){
				 	curIndex =3;
				 	layer.msg("已经是最后一张了");
				 	}else{
				 	curIndex=curIndex+1;
				 	}
				$("#img_1").attr("src","Picture/pler.ht?index="+curIndex)
			})
		})
	</script>
  <body>
  		<%@ include file="/WEB-INF/include-nav.jsp" %>
    <div class="container-fluid">
			<%@ include file="/WEB-INF/include-sidebar.jsp" %>
    </div>
    <div id="divPicture" style="text-align: center;">
    	<h1> 彩虹屁—— 图片浏览 </h1>
    		<div id="picDivSon">
    			<img id="img_1" alt="这是图片1" src="Picture/pler.ht">
    		</div>
    	<br>
    	<button id="btn0">上一张</button>&nbsp;&nbsp;
    	
    	<button id="btn1">图片1</button>&nbsp;&nbsp;
   		<button id="btn2">图片2</button>&nbsp;&nbsp;
   		<button id="btn3">图片3</button>&nbsp;&nbsp;
   		
   		<button id="btn000">下一张</button>&nbsp;&nbsp;
    </div>
  </body>
</html>
